<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- 创建canvas -->
    <canvas id="oCanvas" width="500" height="400" ></canvas>
    <!-- 顶点着色器 -->
    <script type="notjs" id="vertex">
        attribute vec4 a_position;
        uniform float u_CosB, u_SinB;
        void main() {
            // gl_Position = a_position;
            gl_Position.x = a_position.x * u_CosB - a_position.y * u_SinB;
            gl_Position.y = a_position.x * u_SinB + a_position.y * u_CosB;
            gl_Position.z = a_position.z;
            gl_Position.w = a_position.w;
            // gl_PointSize = 10.0;
        }
    </script>
    <script type="notjs" id="fragment">
        precision mediump float;
        void main() {
            gl_FragColor = vec4(0, 0, 0, 1.0);
        }

    </script>
    <script>
        var oCanvas = document.getElementById('oCanvas');
        // 获取webgl上下文对象
        var gl = oCanvas.getContext('webgl');
        if (!gl) {
            console.log('浏览器不支持webgl');
        }

        function createShader (gl, type, source) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (success) {
                return shader;
            }

            console.log(gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
        }
        var vertexStr = document.getElementById('vertex').innerText;
        var fragmentStr = document.getElementById('fragment').innerText;

        var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexStr);
        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentStr);
        function createProgram(gl, vertexShader, fragmentShader) {
            var program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            var success = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (success) {
                return program;
            }
            console.log(gl.getProgramInfoLog(program))
        }
        var program = createProgram(gl, vertexShader, fragmentShader);
        var a_position = gl.getAttribLocation(program, 'a_position');
        var u_CosB = gl.getUniformLocation(program, 'u_CosB');
        var u_SinB = gl.getUniformLocation(program, 'u_SinB');
        var angle = 0.0;
        gl.useProgram(program);
        rotate()
        function rotate() {
            angle ++; 
            var deg = angle * ( Math.PI / 180.0 );
            draw(deg);
            console.log(deg)
            requestAnimationFrame(rotate);
        }
        function draw (deg) {
            var cosB = parseFloat(Math.cos(deg));
            var sinB = parseFloat(Math.sin(deg));
            console.log(cosB, sinB)
            gl.uniform1f(u_CosB, cosB);
            gl.uniform1f(u_SinB, sinB);
            var pointBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
            gl.enableVertexAttribArray(a_position);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                0, 0,
                0.6, 0.5,
                0.4, 0.7,
            ]), gl.STATIC_DRAW);
            
            gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
            gl.drawArrays(gl.TRIANGLES, 0, 3);
        }
    
    </script>
</body>
</html>
